﻿
@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
    ViewBag.Title = "ButtonPlaceHolderTest";
}

<style type="text/css">
    body {
        padding-top: 0;
    }

</style>

<p>Test</p>

<p>
    <input type="file" id="videoFileInput" accept="video/*" />
</p>


<div id="videoPlaceholder" style="width:320px; height:176px; border:1px solid #876389; position:relative;display:none;">
    <video id="videoDisplay" style="position:absolute;top:0;left:0;z-index:-100;"></video>
    <div id="removeVideoButton" class="remove-video" onclick="removeVideo(this);" style="vertical-align:top; text-align:right; margin: 0 .5em;z-index:9999; "><i class="fa fa-times" aria-hidden="true"></i></div>
    <img id="playVideoButton" style="display:block;margin:auto;position:relative;top:calc(100% - 60%);" src="~/Content/images/buttons/Media Play1-WF.gif" onclick="playVideo();" />
    
</div>

@section scripts {
    <script type="text/javascript">

        function removeVideo(e) {
            $("#videoPlaceholder").hide();
            $("#playVideoButton").hide();
            $("#removeVideoButton").hide();
            $("#videoFileInput").val("");
            var videoNode = $("#videoDisplay")[0];
            videoNode.src = "";

        }
        function playVideo() {
            var videoNode = $("#videoDisplay")[0];
            $("#playVideoButton").hide();
            videoNode.play();
        }

        $("#videoDisplay").on("ended", function (e) {
            $("#playVideoButton").show();
            $("#removeVideoButton").show();
        });

        $("#videoDisplay").on("loadedmetadata", function (e) {
            $("#videoPlaceholder").width(this.videoWidth);
            $("#videoPlaceholder").height(this.videoHeight);
            // Set position for playVideoButton
            var top = (($("#videoPlaceholder").height() / 2) - $("#removeVideoButton").height() - 24) + "px";
            $("#playVideoButton").css("top", top);
        });

        (function ($) {

            $("#videoFileInput").change(function (e) {
                var file,
                    fileType,
                    fileReader,
                    fileUrl,
                    videoNode;

                fileReader = new FileReader();
                file = e.target.files[0];
                fileType = file.type;
                videoNode = $("#videoDisplay")[0];

                fileUrl = window.URL.createObjectURL(file);
                videoNode.src = fileUrl;
                $("#videoPlaceholder").show();
                $("#playVideoButton").show();
                $("#removeVideoButton").show();
            });

        }(jQuery));
    </script>
}